<template>
  <div class="result">
      <div v-if="result.length==0">没有找到相关的搜索记录，请换个关键词再次尝试</div>
      <div v-for="i in count" class="exhibit">
        <h3><router-link :to="{path:'/exhibit',query:{blog_id:results[i-1].blog_id}}" @click.native="update(results[i-1].blog_id)">{{results[i-1].title}}</router-link></h3>
        <div class="context">
            <div class="summary"><h5 id="summary">{{results[i-1].summary}}</h5></div>
            <h5 id="info" style="white-space:nowrap;" >
                <pre style="font-size:12px;font-family:'PingFang SC';">点击量：{{results[i-1].click}}   点赞数：{{results[i-1].likes_number}}    {{results[i-1].date}}  <router-link :to="{path:'/space',query:{user_id:results[i-1].author_id}}">{{results[i-1].author}}</router-link> </pre>  
            </h5>
            <h5 id="info" style="white-space:nowrap;" v-if="results[i-1].has_resource==true">
                <pre style="font-size:12px;font-family:'PingFang SC';">资源下载量：{{results[i-1].click}}</pre>  
            </h5>
        </div>
        <div class="img" v-if="results[i-1].has_picture=='true'">
            <img :src="results[i-1].picture_url">
        </div>
      </div>
  </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
import axios from 'axios'
export default {
    props:['input'],
    data(){
        return{
            count:0,
            search:'',
            way:'',
            begin:0,
            end:19,
            input1:'',
            radio:'1',
            results:[],
            result:{
                blog_id:'',
                article:'', //文章标题
                summary:'', //文章预览摘要
                is_haspicture:false,  //文章是否含有图片

                    is_resource:'', //文章是否含有资源
                    filesize:'', //若含有资源则显示资源大小（若无则为空）
                    click:'',  //文章点击量
                    download:'', //文章含有资源则显示下载量（若无则为空）
                    author_id:'', //作者id
                    author_href:'', //作者主页链接
                    date:'',  //文章发布时间
                    img_href:'' //预览使用图片链接（若无则为空，若有提供第一张即可）

            }
        }
    },
    computed:{
    ...mapState(['isLogin','username','input_search','user_id']),
    ...mapGetters([]),
    },
    methods:{
        getParams () {
        // 取到路由带过来的参数 
        var searches = this.$route.query.search;
        var ways = this.$route.query.way;
        // 将数据放在当前组件的数据内
        this.search = searches;
        this.way = ways;
        },
        async loadResult(){
            let {data} = await axios.post('http://localhost:8080/search',{
                    content:this.$route.query.search,
                    search_way:this.$route.query.way
            })
            console.log(data);
            
            if(data.errno===0){
              this.results=data.data;
              console.log(this.results);
              console.log(this.results[0].has_picture)
              console.log(this.results[0].picture_url)
              if(this.results.length>=20){
                this.count=20;
              }
              else{this.count=this.results.length}
              console.log(this.count);
            }
            else{
              window.alert(data.message)
            }
        },
        async update(blog_id){
            let {data} = await axios.post('http://localhost:8080/clickBlog',{
                    blog_id:blog_id,
                    user_id:this.$store.state.user_id
            })
            console.log(data);
            this.$store.commit('changeid',blog_id);
            console.log(this.$store.state.blog_id);
            if(data.errno!=1){
              window.alert(data.message)
              this.$router.push({path:"/result",query:{search:this.input1,way:this.radio}});
            }
        },
        scrollBottom(){
            let scrollTop = document.documentElement.scrollTop;//滚动高度
            let clientHeight = document.documentElement.clientHeight;//可视高度
            let scrollHeight = document.documentElement.scrollHeight;//内容高度
             if (clientHeight + scrollTop >= scrollHeight-20) {
                this.count+=20;
                if(this.count>=this.results.length){
                    this.count=this.results.length;
                }
            }
        },
        search1(){
          if(this.input1==''){
            alert("请输入搜索内容！");
          }
          else{
            this.$router.push({path:"/result",query:{search:this.input1,way:this.radio}});
          }
        },
    },
    created(){
        this.getParams();
        this.loadResult();
    },
    watch: {
      '$route': 'loadResult'
    },
    mounted(){
    //添加滚动事件，检测滚动到页面底部
    window.addEventListener('scroll', this.scrollBottom)
    },
}
</script>

<style scoped lang="scss">
*{
  margin:10px;
  padding:0px;
}
.result{
  .search{
    background:white;
    width:2000px;
    position:fixed;
    left:0px;
    z-index: 10;
    .in{
        position:relative;
        left:300px;
        input{
            width:400px;
            height:30px;
            position:relative;
        }
    }
    el-button{
        width:120px;
        height:30px;
    }
  }
  .exhibit{
    position: relative;
    top: 45px;
    border:1px solid #ccc;
    background: white;
    width:95%;
    height:200px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .context{
     .summary{
        color:gray;
        font-family:'宋体';
        border:1px solid white;
        width:60%;
     }
     .info{
        padding:10px;
     }
    }
    .img{
        width:38%;
        img{
        width: 150px;
        height: 93px;
        position: relative;
        left:800px;
        top:-100px;
        }
    }
  }
}
</style>